﻿<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=1340, initial-scale=0.9" />
    <meta name="renderer" content="ie-comp" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="renderer" content="webkit">
    <meta name="keywords" content='迎新网站' />
    <meta name="description" content='迎新网站' />
    <title>班级信息</title>
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/content.css">

    <link rel="stylesheet" href="css/default.css?V=6" />
    <script src="js/jquery.1.9.1.js"></script>
    <script src="js/avalon1.47.js"></script>
    <script src="/View/JS/FTCommon.js"></script>
    <script src="js/Swiper.js"></script>
    <script src="js/AnimateCache.js"></script>
    <script src="js/jquery.SuperSlide.2.1.1.js"></script>
    <script>
        var model = avalon.define({
            $id: "Index",
            XWData: [],//最新新闻，前8条
            TZGGData: [],//最新通知公告
        })
        avalon.ready(function () {
            ////获取班级首页（新闻,活动）
            $.getJSON("/API/VIEWAPI.ashx?Action=Commanage_GETINDEXLIST&r=" + Math.random(), {}, function (resultData) {
                if (resultData.ErrorMsg == "") {
                    model.TZGGData = resultData.Result2;
                    model.XWPICData = resultData.Result;
                }
            })




        })
    </script>
    <style>
        body {
            font: 400 14px/1.6 "Helvetica Neue", Helvetica, "Microsoft YaHei", sans-serif, Arial, 宋体;
            background: rgb(255, 255, 255);
        }
        /* DaTouWang URL: www.datouwang.com */
        .swiper-container {
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            direction: ltr;
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            -o-backface-visibility: hidden;
            backface-visibility: hidden;
            /* Fix of Webkit flickering */
            z-index: 1;
        }

        .swiper-wrapper {
            position: relative;
            width: 100%;
            -webkit-transition-property: -webkit-transform, left, top;
            -webkit-transition-duration: 0s;
            -webkit-transform: translate3d(0px,0,0);
            -webkit-transition-timing-function: ease;
            -moz-transition-property: -moz-transform, left, top;
            -moz-transition-duration: 0s;
            -moz-transform: translate3d(0px,0,0);
            -moz-transition-timing-function: ease;
            -o-transition-property: -o-transform, left, top;
            -o-transition-duration: 0s;
            -o-transform: translate3d(0px,0,0);
            -o-transition-timing-function: ease;
            -o-transform: translate(0px,0px);
            -ms-transition-property: -ms-transform, left, top;
            -ms-transition-duration: 0s;
            -ms-transform: translate3d(0px,0,0);
            -ms-transition-timing-function: ease;
            transition-property: transform, left, top;
            transition-duration: 0s;
            transform: translate3d(0px,0,0);
            transition-timing-function: ease;
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            box-sizing: content-box;
        }

        .swiper-free-mode > .swiper-wrapper {
            -webkit-transition-timing-function: ease-out;
            -moz-transition-timing-function: ease-out;
            -ms-transition-timing-function: ease-out;
            -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
            margin: 0 auto;
        }

        .swiper-slide {
            float: left;
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            box-sizing: content-box;
        }

        /* IE10 Windows Phone 8 Fixes */
        .swiper-wp8-horizontal {
            -ms-touch-action: pan-y;
        }

        .swiper-wp8-vertical {
            -ms-touch-action: pan-x;
        }

        /* ===============================================================
Your custom styles, here you need to specify container's and slide's
sizes, pagination, etc.
================================================================*/
        .swiper-container {
            /* Specify Swiper's Size: */
            /*width:200px;
	height: 100px;*/
        }

        .swiper-slide {
            /* Specify Slides's Size: */
            /*width: 100%;
	height: 100%;*/
        }

        .swiper-slide-active {
            /* Specific active slide styling: */
        }

        .swiper-slide-visible {
            /* Specific visible slide styling: */
        }
        /* ===============================================================
Pagination Styles
================================================================*/
        .swiper-pagination-switch {
            /* Stylize pagination button: */
        }

        .swiper-active-switch {
            /* Specific active button style: */
        }

        .swiper-visible-switch {
            /* Specific visible button style: */
        }

        @charset "utf-8";

        * {
            padding: 0;
            margin: 0;
        }

        .swiper-container {
            height: 500px;
        }

        .arrow-left {
            background: url(images/YX/arrows.png) no-repeat left top;
            position: absolute;
            left: 10px;
            top: 50%;
            margin-top: -15px;
            width: 17px;
            height: 30px;
            z-index: 10;
        }

        .arrow-right {
            background: url(images/YX/arrows.png) no-repeat left bottom;
            position: absolute;
            right: 10px;
            top: 50%;
            margin-top: -15px;
            width: 17px;
            height: 30px;
            z-index: 10;
        }

        .pagination {
            position: absolute;
            left: 0;
            text-align: center;
            bottom: 5px;
            width: 100%;
        }

        .swiper-pagination-switch {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 10px;
            background: #999;
            margin: 0 3px;
            cursor: pointer;
        }

        .swiper-active-switch {
            background: #fff;
        }

        .swiper-slide {
            position: relative;
            opacity: 0;
            transition: opacity 0.7s ease-in-out;
        }

        .swiper-slide-active {
            opacity: 1;
        }

        .swiper-slide .img {
            position: absolute;
        }

        .inner {
            position: relative;
            display: block;
            height: 500px;
            margin: 0 auto;
        }

        .slide1 {
        }

        .slide2 {
        }

        .slide3 {
        }

        .slide1 .s0 {
            left: 50%;
            margin-left: -154px;
            top: 100px;
        }

        .slide1 .s1 {
            left: 50%;
            margin-left: -425.5px;
            top: 200px;
        }

        .slide1 .s2 {
            left: 50%;
            margin-left: -435px;
            top: 280px;
        }

        .slide1 .s3 {
            left: 0;
            bottom: 0px;
            z-index: 5;
            height: 190px;
        }

        .slide1 .s4 {
            right: 0;
            bottom: 0px;
            z-index: 0;
            height: 160px;
        }

        .slide2 .zh-a-1 {
            left: 60px;
            top: 77px;
            z-index: 9;
        }

        .slide2 .zh-a-2 {
            left: 0;
            top: 0;
        }

        .slide3 .b-1 {
            right: 72px;
            top: 180px;
        }

        .slide3 .b-2 {
            left: 90px;
            top: 180px;
        }

        .slide3 .b-3 {
            left: 50%;
            margin-left: -381px;
            top: 330px;
        }

        .slide3 .b-s-1 {
            width: 100px;
            left: 50px;
            bottom: 0px;
        }

        .slide3 .b-s-2 {
            left: 160px;
            width: 160px;
            bottom: 0px;
        }

        .slide3 .b-s-3 {
            left: 390px;
            width: 58px;
            bottom: 0px;
        }

        .slide3 .b-s-4 {
            right: 359px;
            width: 103px;
            bottom: 0px;
        }

        .slide3 .b-s-5 {
            right: 250px;
            width: 150px;
            bottom: 0px;
        }

        .slide3 .b-s-6 {
            right: 0;
            width: 65px;
            bottom: 0px;
        }

        .slide3 .b-y-1 {
            top: 40px;
            left: 50%;
            margin-left: -20px;
        }

        .slide3 .b-y-2 {
            top: 40px;
            left: 0;
        }

        .slide3 .b-y-3 {
            top: 40px;
            right: 0;
        }

        .loop {
            animation-iteration-count: infinite; /*无限*/
            animation-timing-function: linear; /*平滑*/
        }

        .targetBtn {
            margin-top: 20px;
            position: absolute;
            bottom: 60px;
            left: 352px;
            z-index: 999;
        }

            .targetBtn a {
                height: 50px;
                border-radius: 50px;
                background: rgba(0,0,0,.5);
                float: left;
                line-height: 50px;
                text-align: center;
                color: #fff;
                text-decoration: none;
            }

            .targetBtn .a1 {
                width: 110px;
            }

            .targetBtn .a2 {
                width: 170px;
                margin-left: 15px;
            }
        /*自定义CSS动画*/
        .moveRight {
            -webkit-animation-name: moveRight;
            animation-name: moveRight;
        }

        @-webkit-keyframes moveRight {
            0% {
                opacity: 0;
                left: 0px;
            }

            10% {
                opacity: 1;
            }

            100% {
                opacity: 1;
                left: 550px;
            }
        }

        @keyframes moveRight {
            0% {
                opacity: 0;
                left: 0px;
            }

            10% {
                opacity: 1;
            }

            100% {
                opacity: 1;
                left: 550px;
            }
        }

        .moveLeft {
            -webkit-animation-name: moveLeft;
            animation-name: moveLeft;
        }

        @-webkit-keyframes moveLeft {
            0% {
                opacity: 0;
                left: 390px;
            }

            10% {
                opacity: 1;
            }

            100% {
                opacity: 1;
                left: -370px;
            }
        }

        @keyframes moveLeft {
            0% {
                opacity: 0;
                left: 390px;
            }

            10% {
                opacity: 1;
            }

            100% {
                opacity: 1;
                left: -370px;
            }
        }

        .title {
            position: absolute;
            z-index: 1000;
            left: 200px;
            top: 250px;
            background: #504d4d;
            OPACITY: .8;
            COLOR: WHITE;
            PADDING: 20PX;
            BORDER-RADIUS: 2PX;
        }

        .msg1 {
            display: block;
            height: 36px;
            width: 100px;
            text-align: center;
            background-color: #d81633;
            color: white;
            line-height: 36px;
            margin-top: 10px;
        }
    </style>
</head>

<body ms-controller="Index">




    <!-- 头部 end -->
    <div class="nkhead">
        <div class="wrapper1075 margin  clear" style="margin-top:10px;margin-bottom:10px">
            <a  style="font-size:36px">
                班级主页
            </a>
            <!--<div class="right nksearch clear">
                <input class="nksearchL left" type="text" placeholder="请输入关键字">
                <input class="nksearchR right" type="button">
            </div>-->
        </div>
    </div>

    <!-- 导航 end -->
    <div class="nknav">
        <div class="nknavwrapper margin f16 tc clear">
            <a class="on" href="index.html">班级主页</a>
            <a href="bjcy.html">班级成员信息</a>
            <a href="news.html">班级新闻</a>
            <a href="bjzp.html">班级照片</a>

        </div>
    </div>


    

    
    <div class="swiper-container">
        <a class="arrow-left" href="#"></a>
        <a class="arrow-right" href="#"></a>
        <div class="swiper-wrapper">
          
            <div class="swiper-slide slide3">
                <div class="inner">
                    <img src="images/YX/LB3.jpg" class="ani img" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="0s">
                </div>
            </div>
        </div>
        <div class="pagination"></div>
    </div>

    <script>
        var mySwiper = new Swiper('.swiper-container', {
            pagination: '.pagination',
            paginationClickable: true,
            autoplay: 15000,
            speed: 3,
            //autoplayDisableOnInteraction : false,

            onInit: function (swiper) { //Swiper2.x的初始化是onFirstInit
                swiperAnimateCache(swiper); //隐藏动画元素 
                swiperAnimate(swiper); //初始化完成开始动画
            },
            onSlideChangeEnd: function (swiper) {
                swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
            }
        })

        $('.arrow-left').on('click', function (e) {
            e.preventDefault()
            mySwiper.swipePrev()
        })
        $('.arrow-right').on('click', function (e) {
            e.preventDefault()
            mySwiper.swipeNext()
        })
    </script>

    

    <div class="nkCont1 wrapper1075 margin clear" style="margin-top: 20px;">


        <div class="nkContC left" style="width: 520px; height: 320px; border: 0">
            <div class="nkContTitle clear" style="margin-top: 0px;">
                <div class="left nkContTitleL tc">班级新闻</div>
                <a class="right nkContTitleR f12" href="tzgglist.html">MORE</a>
            </div>

            <div class="newsContent2 f14" style="width: 500px; font-size: 16px;">
                <a ms-repeat-item="TZGGData" ms-attr-title="{{item.Title}}"  target="_blank"  ms-attr-href="news-tzgg.html?ID={{item.ID}}"><span class="ntext" style="width: 355px;">{{ComFunJS.convstr(item.Title,20)}}</span><span class="ntay">[{{item.CRDate|date('MM-dd')}}]</span></a>
            </div>
        </div>
        <div class="nkContC right" style="width: 520px; height: 320px; border: 0">
            <div class="nkContTitle clear" style="margin-top: 0px;">
                <div class="left nkContTitleL tc">班级活动</div>
                <a class="right nkContTitleR f12" href="tzgglist.html">MORE</a>
            </div>

            <div class="newsContent2 f14" style="width: 500px; font-size: 16px;">
                <a ms-repeat-item="TZGGData" ms-attr-title="{{item.Title}}" target="_blank" ms-attr-href="news-tzgg.html?ID={{item.ID}}"><span class="ntext" style="width: 355px;">{{ComFunJS.convstr(item.Title,20)}}</span><span class="ntay">[{{item.CRDate|date('MM-dd')}}]</span></a>
            </div>
        </div>

    </div>






    


    <div id="foot" class="footer">
        Copyright © 2017 All Rights Reserved.<br>
        常州大学 版权所有  | <a href="../View/Login.aspx" style="border: 0px;">后台管理</a>
    </div>



</body>
</html>





